<template>
  <div class="detail-box">
    <div class="first">
      <img class="title" src="/images/jinghe/right/竞合详情@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <tabList :poptitle="titleList" :popdata="jzList"  :itemStyle="itemStyle" style="padding-top: 33px;" :style="itemStyle"/>
        <tabList :poptitle="titleList1" :popdata="hzList"  :itemStyle="itemStyle" style="padding-top: 10px;" :style="itemStyle"/>
        <verdict :poptext="jlList" style="margin-top: 5px;"/>
      </div>
    </div>
    <div class="first second">
      <img class="title" src="/images/jinghe/right/行业竞合@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <Jinghe1 :popdata="popdata"></Jinghe1>
        <verdict :poptext="jlList2"/>
      </div>
    </div>
  </div>
</template>

<script>
import tabList from '../components/tabList'
import verdict from '../components/verdict'
import Jinghe1 from './components/jinghe1.vue'

export default {
  data () {
    return {
      titleList:['竞争', '上游', '中游', '下游'],
      titleList1:['合作', '上游', '中游', '下游'],
      jzList:[],
      hzList:[],
      jlList:'',
      jlList2:'',
      time: "2020.12",
      itemStyle: {
        '--center0': "left",
        '--center': "center",
        '--color': "rgba(193, 226, 255, 1)",
        '--width1': "102px",
        '--width2': "70px",
        '--padding': "0px",
        '--radius': "15px"
      },
      popdata: []
    }
  },
  components: { tabList, verdict, Jinghe1 },
  created() {
  	this.getList()
    this.getTime()
  },
  methods: {
   async getList(){
    let {data:{平均合作频次: pjhz, 平均竞争强度: pjjj, 总合作数: zhz, 总合作频次: zhzp, 总竞争强度: zjz, 竞争企业数:jjqy, 行业:hy, 侧图1结论:r1, 侧图2结论:r2   }} = {... await this.$api.get('/es/jsc/cyjh_detail_all')}
    this.jzList.push({
      name:'竞争企业数',
      dataList: jjqy
    },{
      name:'总竞争强度',
      dataList: zjz
    },{
      name:'平均竞争强度',
      dataList: pjjj
    })
    this.hzList.push({
      name:'总合作数',
      dataList: zhz
    },{
      name:'总合作频次',
      dataList: zhzp
    },{
      name:'平均合作频次',
      dataList: pjhz
    })
    hy.forEach(element => {
      this.popdata.push({
        name: Object.keys(element)[0],
        dataList: eval(Object.values(element))
      })
    })
    this.jlList = r1
    this.jlList2 = r2
    // this.hangyeData = hy
    },
    async getTime(){
      let {data} = await this.$api.get("/es/jsc/get_time")
      this.time = data["统计时间"].split('.').splice(0,2).join('.')
    }
  }
  }
</script>

<style lang="stylus" scoped>
.detail-box{
  display: flex;
  height: 100%;
  flex-direction: column;
  font-family: SourceHanSansCN-Regular !important;
  .title {
    height: 43px;
    margin-bottom: -5px;
  }
  .first {
    .firstContent{
      // width 389px;
      background-color: rgba(3, 16, 38, 0.7100);
      border-radius: 10px;
      padding: 0 18px;
      margin 0 auto;
      position: relative;
      // padding-bottom: 10px;
      padding-bottom: 28px;
    }
  }
  .second {
    margin-top: 10px;
  }
  li {
    position: absolute;
    top: 0px;
    right: 18px;
    display: inline-block;
    // width: 132px;
    height: 15px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 31px;
    color: #b7b7b7;

    opacity: 1;
  }
}
</style>
